<template>
	<view class="window-main" v-if="showMemberInfoWindow">
		<view class="member-info-window">
			<image class="member-info-bg" src="../static/common/bg_shadow_window.png"></image>
			<image class="member-ic" src="../static/common/ic_member_info.png"></image>
			<text class="font-333-36 font-bold" >恭喜！您已升级为星会员</text>
			<view class="info-box">
				<text class="font-666-28">会员姓名：卢明星</text>
				<text class="font-666-28" style="margin-top: 8rpx;">会员类型：星会员</text>
				<text class="font-666-28" style="margin-top: 8rpx;">有效期至：2024-02-04</text>
			</view>
			<view class="info-box" style="margin-top: 20rpx;">
				<text class="font-333-28 font-bold">会员特权</text>
				<view class="row-container" style="margin-top: 14rpx;">
					<image class="amount-ic" src="../static/common/ic_amount_yellow.png"></image>
					<text class="font-666-28">比非会员每单多返2元</text>
				</view>
			</view>
			<text class="close" @click="showMemberInfoWindow = false">确定</text>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"MemberInfoWindow",
		data() {
			return {
				showMemberInfoWindow:false
			};
		}
	}
</script>

<style lang="scss">
	.member-info-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 602rpx;
		position: relative;
		background: white;
		border-radius: 16rpx;
		
		.member-info-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
		}
		
		.member-ic{
			width: 146rpx;
			height: 146rpx;
			margin-top: 44rpx;
			z-index: 110;
		}
		
		.info-box{
			background: linear-gradient(90deg, rgba(255, 209, 0, 0.1) 0%, rgba(255, 209, 0, 0) 100%);
			margin-top: 30rpx;
			border-radius: 16rpx;
			width: calc(100% - 128rpx);
			padding: 20rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			z-index: 110;
			
			.amount-ic{
				width: 42rpx;
				height: 42rpx;
				margin-right: 12rpx;
			}
		}
		
		.close{
			width: calc(100% - 88rpx);
			height: 88rpx;
			margin-top: 44rpx;
			margin-bottom: 44rpx;
			background-color: #FFD100;
			border-radius: 10rpx;
			text-align: center;
			line-height: 88rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			z-index: 110;
		}
		
		
		
	}
</style>